{% macro etherscan_address_link(address) -%}
{% match ethereum_network %}
  {%- when EthereumNetwork::Sepolia -%}
  <a href="https://sepolia.etherscan.io/address/{{address}}"><code>{{address}}</code></a>
  {%- when EthereumNetwork::Mainnet -%}
  <a href="https://etherscan.io/address/{{address}}"><code>{{address}}</code></a>
{% endmatch %}
{%- endmacro %}

{% macro etherscan_block_link(block_number) -%}
{% match ethereum_network %}
  {%- when EthereumNetwork::Sepolia -%}
  <a href="https://sepolia.etherscan.io/block/{{block_number.to_string_inner()}}"><code>{{block_number.to_string_inner()}}</code></a>
  {%- when EthereumNetwork::Mainnet -%}
  <a href="https://etherscan.io/block/{{block_number.to_string_inner()}}"><code>{{block_number.to_string_inner()}}</code></a>
{% endmatch %}
{%- endmacro %}

{% macro etherscan_tx_link(txhash) -%}
{% match ethereum_network %}
  {%- when EthereumNetwork::Sepolia -%}
  <a href="https://sepolia.etherscan.io/tx/{{txhash}}"><code>{{txhash}}</code></a>
  {%- when EthereumNetwork::Mainnet -%}
  <a href="https://etherscan.io/tx/{{txhash}}"><code>{{txhash}}</code></a>
{% endmatch %}
{%- endmacro %}

{% macro format_opt_timestamp(maybe_ts) -%}
{% match maybe_ts %}
  {%- when Some with (ts) -%}
  {{ ts|timestamp_to_datetime }}
  {%- when None -%}
  N/A
{% endmatch %}
{%- endmacro %}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>ckETH and ckERC20 Minter Dashboard</title>
    <style>
        body {
            font-family: monospace;
        }

        table {
            border: solid;
            text-align: left;
            width: 100%;
            border-width: thin;
        }

        h3 {
            font-variant: small-caps;
            margin-top: 30px;
            margin-bottom: 5px;
        }

        table table {
            font-size: small;
        }

        .background {
            margin: 0;
            padding: 0;
        }

        .content {
            max-width: 100vw;
            width: fit-content;
            margin: 0 auto;
        }

        tbody tr:nth-child(odd) {
            background-color: #eeeeee;
        }

        .numeric {
            text-align: right;
        }

        #output-bytes32-principal-error {
            color: red;
            font-style: italic;
        }

        #output-bytes32-principal-ok {
            margin-top: 10px;
            font-family: monospace;
        }

        #input-principal {
            width: 63ch;
            font-family: monospace;
        }
    </style>
</head>

<body>
    <div class="background">
        <div class="content">
            <h3 id="metadata">Metadata</h3>
            <table>
                <tbody>
                    <tr id="ethereum-network">
                        <th>Ethereum Chain</th>
                        <td><a href="https://github.com/ethereum-lists/chains/blob/master/_data/chains/eip155-{{ethereum_network.chain_id()}}.json">{{ ethereum_network }}</a></td>
                    </tr>
                    <tr id="minter-address">
                        <th>Minter address</th>
                        <td>{% call etherscan_address_link(minter_address) %}</td>
                    </tr>
                    <tr id="cketh-ledger-canister-id">
                        <th>ckETH ledger canister ID</th>
                        <td><code>{{ cketh_ledger_id }}</code></td>
                    </tr>
                    <tr id="tecdsa-key-name">
                        <th>tECDSA key name</th>
                        <td><code>{{ ecdsa_key_name }}</code></td>
                    </tr>
                    <tr id="next-transaction-nonce">
                        <th>Next nonce</th>
                        <td>{{ next_transaction_nonce }}</td>
                    </tr>
                    <tr id="minimum-withdrawal-amount">
                        <th>Minimum ETH withdrawal amount (Wei)</th>
                        <td>{{ minimum_withdrawal_amount }}</td>
                    </tr>
                    <tr id="eth-balance">
                        <th>Total ETH managed (Wei)</th>
                        <td>{{ eth_balance.eth_balance() }}</td>
                    </tr>
                    <tr id="total-effective-tx-fees">
                        <th>Total effective transaction fees (Wei)</th>
                        <td>{{ eth_balance.total_effective_tx_fees() }}</td>
                    </tr>
                    <tr id="total-unspent-tx-fees">
                        <th>Total unspent transaction fees (Wei)</th>
                        <td>{{ eth_balance.total_unspent_tx_fees() }}</td>
                    </tr>
                </tbody>
            </table>

            <h3>Principal → Bytes32 conversion</h3>
            <form id="form-principal-conversion">
                Principal: <input id="input-principal" type="text">
                <span id="output-bytes32-principal-error"></span>
                <div id="output-bytes32-principal-ok"></div>
            </form>

            <h3>Block sync</h3>
            <table>
                <tbody>
                    {% if last_observed_block.is_some() -%}
                    <tr id="last-observed-block-number">
                        <th>Last observed block number</th>
                        <td>{% call etherscan_block_link(last_observed_block.unwrap()) %}</td>
                    </tr>
                    {%- endif %}
                    {% if !skipped_blocks.is_empty() -%}
                    {% for (contract_address, blocks) in skipped_blocks -%}
                    <tr id="skipped-blocks-{{ contract_address }}">
                        <th>Skipped blocks ({% call etherscan_address_link(contract_address) %})</th>
                        <td>{% for block in blocks -%}
                            {% call etherscan_block_link(block) %}{% if !loop.last %}, {% endif %}
                            {%- endfor %}</td>
                    </tr>
                    {%- endfor %}
                    {%- endif %}
                    <tr id="first-synced-block-number">
                        <th>First synced block number</th>
                        <td>{% call etherscan_block_link(first_synced_block) %}</td>
                    </tr>
                </tbody>
            </table>

            <h3 id="helper-smart-contracts">Helper Smart Contracts</h3>
            <table>
                <thead>
                <tr>
                    <th>Deposit</th>
                    <th>Address</th>
                    <th>Status</th>
                    <th>Last synced block number</th>
                </tr>
                </thead>
                <tbody>
                {% for (id, scraping_state) in log_scrapings.iter() -%}
                {% if scraping_state.contract_address().is_some() %}
                <tr id="helper-smart-contract-{{ id|lower_alphanumeric }}">
                    <td>{{ id }}</td>
                    <td>{% call etherscan_address_link(scraping_state.contract_address().unwrap()) %}</td>
                    <td>{{ scraping_state.status() }}</td>
                    <td><code>{% call etherscan_block_link(scraping_state.last_scraped_block_number()) %}</code></td>
                </tr>
                {% endif %}
                {%- endfor %}
                </tbody>
            </table>

            {% if !supported_ckerc20_tokens.is_empty() %}
            <h3 id="supported-ckerc20-tokens">Supported ckERC20 tokens</h3>
            <table>
                <thead>
                <tr>
                    <th>Token Symbol</th>
                    <th>Total managed (base unit)</th>
                    <th>Contract Address</th>
                    <th>Ledger Canister Id</th>
                </tr>
                </thead>
                <tbody>
                {% for token in supported_ckerc20_tokens -%}
                <tr id="supported-ckerc20-{{ token.ckerc20_ledger_id}}">
                    <td>{{ token.ckerc20_token_symbol.to_string() }}</td>
                    <td class="numeric">{{ token.balance }}</td>
                    <td>{% call etherscan_address_link(token.erc20_contract_address.to_string()) %}</td>
                    <td><code>{{ token.ckerc20_ledger_id.to_string() }}</code></td>
                </tr>
                {%- endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if !pending_deposits.is_empty() %}
            <h3 id="pending-deposits">Pending deposit events</h3>
            <table>
                <thead>
                <tr>
                    <th>Txn Hash</th>
                    <th>Log Index</th>
                    <th>From</th>
                    <th>Token Symbol</th>
                    <th>Value (base unit)</th>
                    <th>Beneficiary</th>
                    <th>Block</th>
                </tr>
                </thead>
                <tbody>
                {% for deposit in pending_deposits -%}
                <tr>
                    <td>{% call etherscan_tx_link(deposit.tx_hash.to_string()) %}</td>
                    <td class="numeric">{{ deposit.log_index }}</td>
                    <td>{% call etherscan_address_link(deposit.from.to_string()) %}</td>
                    <td>{{ deposit.token_symbol }}</td>
                    <td class="numeric">{{ deposit.value }}</td>
                    <td><code>{{ deposit.beneficiary }}</code></td>
                    <td class="numeric">{% call etherscan_block_link(deposit.block_number) %}</td>
                </tr>
                {%- endfor %}
                </tbody>
            </table>
            {% endif %}


            {% if !minted_events_table.is_empty() %}
            <h3 id="minted-events">Minted events</h3>
            <table>
                <thead>
                    <tr>
                        <th>Txn Hash</th>
                        <th>Log Index</th>
                        <th>From</th>
                        <th>Token Symbol</th>
                        <th>Value (base unit)</th>
                        <th>Beneficiary</th>
                        <th>Mint Block Index</th>
                    </tr>
                </thead>
                <tbody>
                    {% for event in minted_events_table.current_page %}
                    <tr>
                        <td>{% call etherscan_tx_link(event.deposit_event.transaction_hash().to_string()) %}</td>
                        <td class="numeric">{{ event.deposit_event.log_index() }}</td>
                        <td>{% call etherscan_address_link(event.deposit_event.from_address().to_string()) %}</td>
                        <td class="numeric">{{ event.token_symbol }}</td>
                        <td class="numeric">{{ event.deposit_event.value() }}</td>
                        <td><code>{{ event.deposit_event.beneficiary() }}</code></td>
                        <td class="numeric">{{ event.mint_block_index }}</td>
                    </tr>
                    {% endfor %}
                    {% if minted_events_table.has_more_than_one_page() %}{{ minted_events_table.pagination|safe }}{% endif %}
                </tbody>
            </table>
            {% endif %}

            {% if !invalid_events.is_empty() %}
            <h3 id="rejected-deposits">Rejected deposits</h3>
            <table>
                <thead>
                    <tr>
                        <th>Transaction</th>
                        <th>Log Index</th>
                        <th>Reason</th>
                    </tr>
                </thead>
                <tbody>
                    {% for (source, reason) in invalid_events %}
                    <tr>
                        <td>{% call etherscan_tx_link(source.transaction_hash.to_string()) %}</td>
                        <td class="numeric">{{ source.log_index }}</td>
                        <td>{{ reason }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if !withdrawal_requests.is_empty() %}
            <h3 id="withdrawal-requests">Withdrawal Requests ckETH → ETH and ckERC20 → ERC20</h3>
            <table>
                <thead>
                <tr>
                    <th>Ledger Burn Index</th>
                    <th>To</th>
                    <th>Token Symbol</th>
                    <th>Value (base unit)</th>
                    <th>Created At</th>
                </tr>
                </thead>
                <tbody>
                {% for withdrawal in withdrawal_requests %}
                <tr>
                    <td class="numeric">{{ withdrawal.cketh_ledger_burn_index }}</td>
                    <td>{% call etherscan_address_link(withdrawal.destination) %}</td>
                    <td>{{ withdrawal.token_symbol }}</td>
                    <td class="numeric">{{ withdrawal.value }}</td>
                    <td>{% call format_opt_timestamp(withdrawal.created_at) %}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if !pending_transactions.is_empty() %}
            <h3 id="pending-transactions">Pending Transactions ckETH → ETH and ckERC20 → ERC20</h3>
            <table>
                <thead>
                <tr>
                    <th>Ledger Burn Index</th>
                    <th>To</th>
                    <th>Token Symbol</th>
                    <th>Value (base unit)</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                {% for tx in pending_transactions %}
                <tr>
                    <td class="numeric">{{ tx.ledger_burn_index }}</td>
                    <td>{% call etherscan_address_link(tx.destination) %}</td>
                    <td>{{ tx.token_symbol }}</td>
                    <td class="numeric">{{ tx.value }}</td>
                    <td>{{ tx.status }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if !finalized_transactions_table.is_empty() %}
            <h3 id="finalized-transactions">Finalized Transactions ckETH → ETH and ckERC20 → ERC20</h3>
            <table>
                <thead>
                <tr>
                    <th>Ledger Burn Index</th>
                    <th>To</th>
                    <th>Token Symbol</th>
                    <th>Value (base unit)</th>
                    <th>Txn Fee (Wei)</th>
                    <th>Block</th>
                    <th>Txn Hash</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                {% for tx in finalized_transactions_table.current_page %}
                <tr>
                    <td class="numeric">{{ tx.ledger_burn_index }}</td>
                    <td>{% call etherscan_address_link(tx.destination) %}</td>
                    <td>{{ tx.token_symbol }}</td>
                    <td class="numeric">{{ tx.value }}</td>
                    <td class="numeric">{{ tx.transaction_fee }}</td>
                    <td class="numeric">{% call etherscan_block_link(tx.block_number) %}</td>
                    <td>{% call etherscan_tx_link(tx.transaction_hash) %}</td>
                    <td>{{ tx.status }}</td>
                </tr>
                {% endfor %}
                {% if finalized_transactions_table.has_more_than_one_page() %}{{ finalized_transactions_table.pagination|safe }}{% endif %}
                </tbody>
            </table>
            {% endif %}

            {% if !reimbursed_transactions_table.is_empty() %}
            <h3 id="reimbursed-transactions">Reimbursed Transactions</h3>
            <table>
                <thead>
                    <tr>
                        <th>Ledger Burn Index</th>
                        <th>Ledger Mint Index</th>
                        <th>Token Symbol</th>
                        <th>Value (base unit)</th>
                        <th>Txn Hash</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in reimbursed_transactions_table.current_page %}
                    {% match r %}
                    {% when DashboardReimbursedTransaction::Reimbursed with {cketh_ledger_burn_index, reimbursed_in_block, reimbursed_amount, token_symbol, transaction_hash} %}
                    <tr>
                        <td class="numeric">{{ cketh_ledger_burn_index }}</td>
                        <td class="numeric">{{ reimbursed_in_block }}</td>
                        <td>{{ token_symbol }}</td>
                        <td class="numeric">{{ reimbursed_amount }}</td>
                        <td>{% if transaction_hash.is_some() %}{% call etherscan_tx_link(transaction_hash.unwrap()) %}{% else%}N/A{% endif %}</td>
                        <td>Reimbursed</td>
                    </tr>
                    {% when DashboardReimbursedTransaction::Quarantined with {cketh_ledger_burn_index, token_symbol} %}
                    <tr>
                        <td class="numeric">{{ cketh_ledger_burn_index }}</td>
                        <td class="numeric">N/A</td>
                        <td>{{ token_symbol }}</td>
                        <td class="numeric">N/A</td>
                        <td>N/A</td>
                        <td>Quarantined</td>
                    </tr>
                    {% endmatch %}
                    {% endfor %}
                    {% if reimbursed_transactions_table.has_more_than_one_page() %}{{ reimbursed_transactions_table.pagination|safe }}{% endif %}
                </tbody>
            </table>
            {% endif %}
        </div>
    </div>

    <script>
        {% include "principal_to_bytes.js" %}

        window.addEventListener("load", function () {
            document.getElementById("form-principal-conversion").addEventListener("keypress", function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });

            function recomputePrincipal(event) {
                let input = event.target.value.trim();
                let ok_output = document.getElementById("output-bytes32-principal-ok");
                let err_output = document.getElementById("output-bytes32-principal-error");
                try {
                    let hex = principalToBytes32(input);
                    ok_output.innerHTML = hex;
                    err_output.innerHTML = "";
                } catch (e) {
                    ok_output.innerHTML = "";
                    err_output.innerHTML = e.message;
                }
            }
            let inputPrincipal = document.getElementById("input-principal");

            inputPrincipal.addEventListener("change", recomputePrincipal);
            inputPrincipal.addEventListener("keypress", recomputePrincipal);
            inputPrincipal.addEventListener("input", recomputePrincipal);
        });
    </script>
    </body>
</html>

